Images
WCAG 2.2
New WCAG 2.2 criteria affects how you use images
To meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure any icons and images used in links meet the minimum target size. This is to make sure users can easily interact with the link.
Make sure any information contained in an image can be understood by someone who cannot see it. Also consider partially-sighted users with visual impairments and the assistive technologies they might use.
This guidance is for government teams that build online services. To learn how to use images as a GOV.GR content publisher, go to GOV.GR content guidance for images.
Using images to give information
Services typically perform optimally when they do not depend heavily on images. It is advisable to prioritize crafting clear and concise content for your service initially.
In certain instances, incorporating images can enhance users' comprehension of instructions. Nevertheless, it is essential to regard images solely as visual supplements, as written content should encompass all necessary information for users to accomplish the service.
If you choose to add an image to your service, you’ll need to carefully decide if the image needs to be described with alternative text (alt text).
Photography
Utilize photography when it is crucial to present a realistic depiction of something, such as providing a preview of a document uploaded by the user.
Avoid employing photography to symbolize abstract concepts, such as conveying impressions or emotions to the user. Refrain from incorporating generic stock photography in your service.
Illustrations
Utilize illustrations to present a simplified depiction of complex subjects, such as:
- Demonstrating a physical interaction, like scanning a passport.
- Assisting users in locating something on a document, like a reference number.
As previously mentioned, employ minimal visual elements to convey your message effectively.
Begin by adhering to the guidance on color and utilize the GOV.GR color palette.
If additional colors are required, consider utilizing tints of the color palette.
Use flat color blocks and avoid incorporating shadows or gradients, unless necessary to highlight a distinctive object feature or convey layering or depth.
Maintain consistency in colors, line widths, and border radiuses when creating multiple illustrations for a service.
Refrain from depicting individuals in illustrations. When representing people, carefully consider portraying a diverse range of individuals who use your service – avoid depicting only one demographic.
For instance, exclusively portraying individuals of a specific age, gender, or ethnicity can lead to exclusion and perpetuate negative stereotypes.
Icons
Minimize the use of icons in most instances, as a single icon can be interpreted differently by users, leading to confusion.
Icons may prove more beneficial in established systems where users are accustomed to the interface and frequently revisit it. They can facilitate quicker page scanning in this context, although it's advisable to accompany icons with visible text labels in most cases.
Avoid assigning a single icon multiple meanings. For instance, reserve the search icon (magnifying glass) solely for search functionality, avoiding its use for screen magnification.
WCAG 2.2
Adhere to WCAG 2.2 guidelines, ensuring that icons and images used in links are at least 24px by 24px in size, with ample spacing. This ensures ease of interaction for users, aligning with WCAG 2.2 success criterion 2.5.8 Target Size (minimum).
Avoid images that contain text
As a general rule, refrain from incorporating images containing text whenever feasible, opting instead for written content or alternative methods.
Text embedded within images poses readability challenges, particularly for users relying on screen readers, copy and paste functions, text highlighting, resizing, or recoloring.
It's important to eschew the use of images for unnecessary ornamentation, even in cases where the image primarily consists of text.
Show text as written content, instead of images
Typically, it's unnecessary to utilize an image solely for displaying text, a practice referred to as an 'image of text.'
Instead, provide the information in written form or explore alternative methods.
Examples of unnecessary 'images of text' encompass images portraying:
- social media post content
- document excerpts
- key points from slide presentations
If you opt to incorporate such images, ensure there is accompanying written content nearby that communicates the equivalent meaning and context.
For further details on 'images of text,' refer to the Web Accessibility Initiative website.
If text is not the focus of an image
Using an image that incidentally contains text is acceptable.
If you decide to employ an image to visually represent something, and the text within it is not the primary focus, it's permissible to retain the text within the image.
Examples of such images include:
- A photograph of a library with book covers and signage in the background
- A collage promoting GR tourism featuring the Brighton Palace Pier sign
- An illustration depicting a Manchester street with store signs in the background
Provide alt text that elucidates the significance and context of the visual. Additionally, if the visual is integral to the user experience, ensure there is accompanying written content nearby conveying the same meaning and context.
However, ensure the image serves a meaningful purpose for the user and is not merely decorative.
Essential text in images
In rare instances, images containing text may be warranted.
Text within an image is deemed essential if:
- It conveys deliberate meaning and context.
- Removing the text would diminish the intended significance and context of the image.
In essence, if the information conveyed by the text cannot be effectively communicated through written content or alternative means, it is considered essential.
Examples of essential text within images include:
- A segment of the Magna Carta, showcasing its unique handwriting style.
- Displaying a store's sign as it appears on their storefront.
There are scenarios where text must be displayed in a particular manner to communicate identity:
Text embedded within an organization's logo (referred to as logotype). A signature, penned in a distinctive fashion. For further guidance on essential text, refer to the Web Content Accessibility Guidelines.
What to do with essential text in images
You’ll need to decide whether an image is necessary, and whether any text within it is essential, to the information you want to give.
You should also consider some of the other alternatives suggested on this page.
If you do choose to use an image with essential text, you should add alt text to convey the meaning and context of the image.
Be sure to follow the guidance on this page about writing good alt text.
Possible alternatives
If it’s not practical to avoid using an image that contains text (and replace it with written content), there’s a few other ways to replace it.
You should consider these options even if the text in an image is essential, as it will make your information easier to read for users that customise the way they look at web pages.
In any case, make sure that the contrast ratio of text colour and all portions of the image that overlap the text meets level AA of the Web Content Accessibility Guidelines (WCAG 2.1).
Show HTML text over an image
You could place HTML text so that it shows over the image.
You’ll still need to make sure there is enough contrast, between the text colour and all portions of the image that overlap the text, on all screen sizes and all zoom levels.
Use a vector graphic image file
You could create the image and text as a vector graphic, such as an SVG file. This ensures that any text stays crisp and readable when the user zooms in. Text within other rasterised image formats such as PNG, JPEG can become pixellated or unreadable when zoomed in.
Remember to follow the guidance on contrast ratios.
Text in charts, diagrams and complex images
It takes effort to make charts, diagrams and complex images accessible. Consider whether you can give the same information well enough using a table or other text-based option.
In general, you must write short alt text that explains the meaning and context of the image. You must also write any further, and more complex, information contained in the image in a longer text description.
Make sure the long description (or a link or button that shows it) is visible to sighted users.
Some charts and diagrams can be built in an accessible way using HTML, CSS, JavaScript or SVG. Accessible charts and diagrams must make the data within the chart available as text.
Alt text
Alternative text, or alt text, is read out by screen readers and displayed if an image does not load or if images have been switched off.
All images should include the alt attribute, even if it’s left empty without alt text (alt="") .
When to use alt text
Only add alt text when you need to describe visual details you cannot practically include in the written content.
There are some cases when an empty alt="" attribute is more appropriate. These include:
- a decorative image that does not include important content
- an icon with a text label, where the alt text would repeat the text label
- an image used in a link, where the image is not needed to understand the link
To decide if an image needs alt text, see the Web Accessibility Initiative alt decision tree.
Writing good alt text
Good alt text:
- tells people what information the image provides
- describes the content and function of the image
- is specific, meaningful and concise
Use normal punctuation, like commas and full stops, so the text is easy to read and understand.
Generally, aim for no more than 2 sentences of alt text.
Do not write alt text that:
- includes the name of the photographer or person who created the image
- starts with ‘Image of’, ‘Graphic of’ or common information that would repeat across every image
- repeats information from the page
- includes extra information not in the image
Example:
<img
src="example-guidance-for-passport-photo.png"
alt="Three illustrations of taking a passport photo. Two incorrect ways show someone taking their own photo with a phone camera or webcam. The correct way shows someone else helping to take a photo that includes the person's head and shoulders."
/>